<template>
  <div class="Deviceset">
    <section class="toolTop">
      <el-form :inline="true" class="demo-form-inline">
        <el-row :gutter="35" class="inwrap">
          <el-col :span="4">
            <el-form-item class="title">
              <router-link to="/alldevice" class="link">
                <i></i>返回
              </router-link>
            </el-form-item>
          </el-col>
          <el-col :span="20"></el-col>
        </el-row>
      </el-form>
    </section>
    <section class="mainWrap">
      <template v-for="(item,index) in listData">
        <el-collapse :accordion="false" v-model="activeNames">
          <el-collapse-item class="all_part coll_wrap" :key="index" :name="index">
            <template slot="title">
              <span>{{item.name}}</span>
              <span>{{item.id}}</span>
            </template>
            <Devicesetdetail
              :params="{ $type:'checkBox'}"
              v-bind:listData="item.resourcedefs"
              v-bind:item="item"
            ></Devicesetdetail>
          </el-collapse-item>
        </el-collapse>
      </template>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../../api/devicemg/suballdevice/deviceset.js"></script>

<style lang="scss">
.Deviceset {
  > section {
    &.toolTop {
      height: auto !important;
      padding-bottom: 17px;
      .el-form {
        .el-form-item {
          .link {
            height: 30px;
            border: 1px solid #9da4af;
            color: #9da4af;
            padding: 5px;
          }
        }
      }
    }
    &.mainWrap {
      margin-top: -2%;
      .coll_wrap {
        .params_ul {
          height: auto;
          overflow: hidden;
          > li {
            float: left;
            width: 50%;
            padding: 8px 0;
            strong {
              padding-right: 24px;
              color: #777575;
            }
          }
        }
      }
      .all_part {
        .params_ul {
          > li {
            width: 25%;
            strong {
              padding-right: 0px;
            }
            span {
              padding: 0 16px;
              color: #000;
            }
          }
        }
        span {
          &:nth-child(2) {
            margin-left: 28%;
          }
        }
      }
    }
  }
}
</style>
